import React from 'react'
import { Button,  Form, Input, DatePicker } from 'antd';
import PropTypes from 'prop-types'
import './index.css'
import dayjs from 'dayjs'
const { RangePicker } = DatePicker;
 function SearchBar(props) {
    const doSearch = (params) => {
        
        params.range = [
            dayjs(params.range[0]).format('YYYY-MM-DD'),
            dayjs(params.range[1]).format('YYYY-MM-DD')
        ]
        props.handleSearch(params)
    }
  return (
    <Form
    layout='inline'
    onFinish={doSearch}
    className = "SearchBars"
  >
    <Form.Item
      label="关键字"
      name="keyword"
     
    >
      <Input />
    </Form.Item>

    <Form.Item
      label="日期"
      name="range"
    >
        <RangePicker 
        format="YYYY-MM-DD"/>
    </Form.Item>

   

    <Form.Item>
      <Button type="primary" htmlType="submit">
        搜索
      </Button>
    </Form.Item>
  </Form>
  )
}
SearchBar.propTypes={
// 父组件传过来方法，实现搜索功能
handleSearch: PropTypes.func.isRequired
}
export default SearchBar